import React, { forwardRef, useEffect, isValidElement } from "react"
import { isFunction } from "../../utils"
/**
 *
 * @param {*} props
 * @param {React.RefObject} ref
 * @param {number} [props.rows] 显示省略的行数
 * @param {boolean} [props.expandable] 是否显示操控按钮
 * @param {string|string[]} [props.className] 节点类名
 * @param {React.CSSProperties} [props.style] 节点样式
 * @param {boolean} [props.expanded] 是否展开
 * @param {boolean} [props.disabled] 是否禁用省略功能
 * @param {(expanded:boolean)=>ReactNode} [props.expandRender] 自定义渲染操控按钮
 * @param {(isExpand:boolean,ev:Event)=>void} [props.onExpand] 点击展开、折叠时触发
 * @returns {React.ReactNode}
 */
const EllipsisComponent = (props, ref) => {
    const {
        children, rows = 1, expanded, className = "", style = {}, expandRender,
        expandable = true, onExpand, disabled
    } = props

    const renderExpand = () => {
        if (disabled || !expandable || !isFunction(expandRender) || !isValidElement(expandRender())) {
            return
        }
        return (
            <div onClick={() => { onExpand?.(!expanded) }} className={`${"next-ellipsis-action-collapsed" + (expanded ? "-show" : "")} cursor-pointer`}>
                {!expanded && <span>...</span>}
                {expandRender()}
            </div>
        )
    }
    return (
        <div ref={ref} className={`next-ellipsis-collapsed next-ellipsis-multiple ${className}`}
            style={{ ...style, "WebkitLineClamp": rows, display: expanded ? "block" : "-webkit-box" }}
        >
            <span>{children}</span>
            {renderExpand()}
        </div>
    )
}
const Ellipsis = forwardRef(EllipsisComponent)
Ellipsis.displayName = "Ellipsis"
export default Ellipsis